<template>
  <div class="weatherContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="weatherMain">
      <div id="container"></div>
      <div class="top">
        <el-form>
          <el-form-item label="请选择城市" prop="selectValue" label-width="100px">
          <el-select
            v-model="selectValue"
            placeholder="请选择城市"
            @change="changeSelected"
          >
            <el-option
              v-for="(item, index) in selectList"
              :key="index"
              :label="item.city"
              :value="item.adcode"
              style="padding-left: 10px;padding-top: 5px;"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-form>
      </div>
      <div class="main">
        <div class="mainLeft">
          <p>
            日期：{{ weatherList[0]?.date }}
          </p>
          <p>
            <el-icon style="font-size: 150px;color: #f8d447;">
              <component :is="weatherList[0]?.icon"></component>
            </el-icon>
          </p>
        </div>
        <div class="mainRight">
          <p>气温：{{ `${weatherList[0]?.nightTemp}-${weatherList[0]?.dayTemp}℃` }}</p>
          <p>状况：{{ weatherList[0]?.dayWeather }}</p>
          <p>风力：{{ weatherList[0]?.dayWindPower }}</p>
          <p>风向：{{ weatherList[0]?.nightWindDir }}</p>
          <p>夜间：{{ weatherList[0]?.nightWeather }}</p>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomItem" v-for="(weather, index) in weatherListTo" :key="index">
          <p>日期：{{ weather?.date }}</p>
          <p>
            <el-icon style="font-size: 38px;color: #f8d447;">
              <component :is="weather?.icon"></component>
            </el-icon>
          </p>
          <p>{{ `${weather?.nightTemp}-${weather?.dayTemp}℃` }}</p>
          <p>{{ weather?.dayWeather }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import MapLoader from "@/utils/amap"
// import { Loading } from '@/utils/plugins'
import { reqCityInfo } from '@/api/tools/index.ts'

const route = useRoute()
const router = useRouter()

const selectValue = ref('110000')
const selectList = ref<any[]>([])
const weatherList = ref<string[]>([])
const weatherListTo = ref<string[]>([])

const changeSelected = (value: string) => {
  selectValue.value = value
  window.showGlobalLoading()
  mapInit()  
}

const getCityList = () => {
  reqCityInfo({}).then((res: any) => {
    if (res.code == '200') {
      selectList.value = res.data
    } else {
      ElMessage.error(res.data.message)
    }
  })
}

const mapInit = () => {
  MapLoader().then((AMap: any) => {
    //加载天气查询插件
    AMap.plugin('AMap.Weather', function () {
      //创建天气查询实例
      var weather = new AMap.Weather();
      //执行实时天气信息查询
      weather.getForecast(selectValue.value, function (err: any, data: any) {
        if (err) {
          ElMessage.error(err)
          return
        }
        weatherList.value = data.forecasts
        weatherList.value.map((item: any) => {
          switch (item.dayWeather) {
          case '晴':
            item.icon = 'Sunny'
            break;
          case '阴':
            item.icon = 'MostlyCloudy'
            break;
          case '多云':
            item.icon = 'Cloudy'
            break;
          case '阵雨':
            item.icon = 'Lightning'
            break;
          case '大雨':
            item.icon = 'Pouring'
            break;
          case '小雨':
            item.icon = 'Drizzling'
            break;
          case '大雪':
            item.icon = 'Drizzling'
            break;
          case '小雪':
            item.icon = 'Drizzling'
            break;
          default:
            item.icon = 'Sunny'
            break;
        }
        })
        weatherListTo.value =  data.forecasts.splice(1, 3)
        window.hideGlobalLoading()
      });
    });
  })
}

onMounted(() => {
  getCityList()
  window.showGlobalLoading()
  mapInit()
})

</script>

<style lang="scss" scoped>
.weatherContent {
  width: 100%;
  height: auto;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .weatherMain {
    width: 100%;
    height: 450px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .top {
      flex: 0.4;
      width: 100%;
    }
    .main {
      flex: 2;
      width: 100%;
      display: flex;
      .mainLeft {
        width: 100%;
        margin-right: 10px;
        padding: 10px 0 35px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .mainRight {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 25px 0;
      }
    }
    .bottom {
      flex: 1.2;
      width: 100%;
      display: flex;
      .bottomItem {
        width: 100%;
        margin: 5px 5px 0 0;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      :last-child {
        margin-right: 0;
      }
    }
  }
}
</style>